<template>
	<view class="diy-nav" :style="{paddingTop: statusBarHeight + 'px', backgroundColor: bgColor || '#f0f0f0'}">
		{{title}}
	</view>
</template>

<script setup>
	import {defineProps, ref} from 'vue'
	const {title, bgColor} = defineProps(['title', 'bgColor'])
	const statusBarHeight = ref('')
	// 获取当前机型状态栏的高度，然后设置padding
	// 获取的statusBarHeight已经是渲染出来的内容了，获取到的数值单位是px
	statusBarHeight.value = uni.getWindowInfo().statusBarHeight
	console.log(statusBarHeight.value)
</script>

<style lang="scss" scoped>
.diy-nav{
	// padding-top: 50rpx;
	text-align: center;
	height: 100rpx;
	line-height: 100rpx;
	position: fixed;
	top: 0;
	width: 100vw;
	z-index: 999;
}
</style>